<template>
  <div class="history-play">
    <div class="tabs">
      <el-tabs v-model="activeTab" @tab-change="handleTabChange">
        <el-tab-pane label="单曲" :name="0">
          <SongTable :tableData="songList" :height="tableHeight"/>
        </el-tab-pane>
        <el-tab-pane label="歌单" :name="1">
          <PlayListTable  v-if="playList.length>0" :tableData="playList" :height="tableHeight" />
          <div v-else class="empty-content">暂无播放记录</div>
        </el-tab-pane>
        <el-tab-pane label="视频" :name="2">
          <div class="empty-content">暂无播放记录</div>
        </el-tab-pane>
        <el-tab-pane label="播客" :name="3">
          <PlayListTable  v-if="bokeList.length>0" :tableData="bokeList" :height="tableHeight" />
          <div v-else class="empty-content">暂无播放记录</div>
        </el-tab-pane>
        <el-tab-pane label="专辑" :name="4">
          <div class="empty-content">暂无播放记录</div>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script setup lang="ts">
import {ref, onMounted, reactive, computed} from 'vue'
import SongTable from '@/components/Table/SongTable.vue'
import { recentSong,recentPlaylist,recentVideo,recentDj,recentAlbum } from "@/assets/apis/http"
import { Song,HistoryPlayList } from '@/assets/apis/MusicDataType'
import { usePlayStore } from '@/store/PlayStore'

// 用于记录各标签页是否已经加载过
const loadedTabs = reactive({
  songTab: false,
  playlistTab: false,
  audioBookTab: false,
  podcastTab: false,
  albumTab: false
})

const playStore = usePlayStore()
const activeTab = ref(0)
const songList = reactive<Song[]>([])
//歌单
const playList = reactive<HistoryPlayList[]>([])
//播客
const bokeList = reactive<HistoryPlayList[]>([])
//专辑
const albumList = reactive<HistoryPlayList[]>([])

const tableHeight = computed(()=>{
  return playStore.playList.length>0?520:600;
})
// 最近播放歌曲
async function getSongList() {
    const res = await recentSong({limit:20})
    console.log("最近播放歌曲",res)
  if (res.data.total==0)return;
  // 处理歌曲数据格式
  songList.splice(0,songList.length,...res.data.list.map(song => ({
      id: song.data.id,
      name: song.data.name,
      mvId: song.data.mv,
      albumPic: song.data.al.picUrl,
      album: song.data.al.name,
      duration: song.data.dt,
      singer: song.data.ar.map(({ name, id }) => ({ name, id })),
      fee: song.data.fee,
      url: 'https://music.163.com/song/media/outer/url?id=' + song.data.id + '.mp3'
    }))
  )
}
// 最近播放歌单
async function getPlaylist() {
    const res = await recentPlaylist({limit:20})
    console.log("最近播放歌单",res)
  if (res.data.total===0)return;
  // 处理歌曲数据格式
  playList.splice(0,songList.length,...res.data.list.map(song => ({
      id: song.data.id,
      name: song.data.name,
      coverImgUrl: song.data.coverImgUrl,
      nickname: song.data.creator.nickname,
      userId: song.data.creator.userId,
      avatarUrl: song.data.creator.avatarUrl,
      osText: song.multiTerminalInfo.osText,
      playTime: song.playTime
    }))
  )
}

//获取声音
async function getAudioBookList() {
  const res = await recentVoice({limit:20})
  console.log("最近播放声音",res)
}

async function getPodcastList() {
  const res = await recentDj({limit:20})
  console.log("最近博客",res)
  if (res.data.total===0)return;
  // 处理歌曲数据格式
  bokeList.splice(0,songList.length,...res.data.list.map(song => ({
      id: song.data.id,
      name: song.data.name,
      coverImgUrl: song.data.picUrl,
      nickname: song.data.dj.nickname,
      userId: song.data.dj.userId,
      avatarUrl: song.data.dj.avatarUrl,
      osText: song.multiTerminalInfo.osText,
      playTime: song.playTime
    }))
  )
}

async function getAlbumList(){
  const res = await recentAlbum({limit:20})
  console.log("最近专辑",res)
  if (res.data.total===0)return;
  // 处理歌曲数据格式
  albumList.splice(0,songList.length,...res.data.list.map(song => ({
      id: song.data.id,
      name: song.data.name,
      coverImgUrl: song.data.picUrl,
      nickname: song.data.dj.nickname,
      userId: song.data.dj.userId,
      avatarUrl: song.data.dj.avatarUrl,
      osText: song.multiTerminalInfo.osText,
      playTime: song.playTime
    }))
  )
}

// 处理标签页切换
const handleTabChange = (tab: string | number) => {
  switch (Number(tab)) {
    case 0: // 单曲
      if (!loadedTabs.songTab) {
        getSongList()
        loadedTabs.songTab = true
      }
      break
    case 1: // 歌单
      if (!loadedTabs.playlistTab) {
        getPlaylist()
        loadedTabs.playlistTab = true
      }
      break
    case 2: // 有声书
      if (!loadedTabs.audioBookTab) {
        getAudioBookList()
        loadedTabs.audioBookTab = true
      }
      break
    case 3: // 播客
      if (!loadedTabs.podcastTab) {
        getPodcastList()
        loadedTabs.podcastTab = true
      }
      break
    case 4: // 专辑
      if (!loadedTabs.albumTab) {
        getAlbumList()
        loadedTabs.albumTab = true
      }
      break
  }
}

onMounted(() => {
  // 初始加载单曲标签页数据
  getSongList()
  loadedTabs.songTab = true
})
</script>

<style scoped lang="scss">
.history-play {
  padding: 0px 20px;

  .tabs {
    :deep(.el-tabs__header) {
      margin-bottom: 20px;
    }
  }

  .empty-content {
    text-align: center;
    color: var(--el-text-color-secondary);
    padding: 40px 0;
  }
}
</style>
